<template>
  <div class="orderlist">
    <!-- 顶部 -->
    <van-nav-bar title="全部订单" fixed>
      <template #right>
        <van-icon name="service-o" size="18" />
      </template>
    </van-nav-bar>

    <van-tabs v-model="active1" sticky>
      <van-tab title="全部订单">
        <!-- 商品小卡片 -->
        <van-card
          v-for="(item, i) of order"
          :key="i.id"
          :num="item.num"
          :price="item.price * item.num"
          :desc="item.category"
          :title="item.title"
          :thumb="`/img/product/${item.pic}`"
        >
          <template #tags>
            <van-tag plain type="danger">包邮</van-tag>
          </template>
          <template #footer>
            <van-button
              color="rgb(222, 196, 155)"
              plain
              type="primary"
              size="mini"
              >退款</van-button
            >
            <van-button color="rgb(222, 196, 155)" type="primary" size="mini"
              >催发货</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待付款">
        <!-- 商品小卡片 -->
        <van-card
          v-for="(item, i) of order"
          :key="i.id"
          :num="item.num"
          :price="item.price * item.num"
          :desc="item.category"
          :title="item.title"
          :thumb="`/img/product/${item.pic}`"
        >
          <template #tags>
            <van-tag plain type="danger">包邮</van-tag>
          </template>
          <template #footer>
            <van-button
              color="rgb(222, 196, 155)"
              plain
              type="primary"
              size="mini"
              >退款</van-button
            >
            <van-button color="rgb(222, 196, 155)" type="primary" size="mini"
              >催发货</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待发货">
        <!-- 商品小卡片 -->
        <van-card
          v-for="(item, i) of order"
          :key="i.id"
          :num="item.num"
          :price="item.price * item.num"
          :desc="item.category"
          :title="item.title"
          :thumb="`/img/product/${item.pic}`"
        >
          <template #tags>
            <van-tag plain type="danger">包邮</van-tag>
          </template>
          <template #footer>
            <van-button
              color="rgb(222, 196, 155)"
              plain
              type="primary"
              size="mini"
              >退款</van-button
            >
            <van-button color="rgb(222, 196, 155)" type="primary" size="mini"
              >催发货</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待收货">
        <!-- 商品小卡片 -->
        <van-card
          v-for="(item, i) of order"
          :key="i.id"
          :num="item.num"
          :price="item.price * item.num"
          :desc="item.category"
          :title="item.title"
          :thumb="`/img/product/${item.pic}`"
        >
          <template #tags>
            <van-tag plain type="danger">包邮</van-tag>
          </template>
          <template #footer>
            <van-button
              color="rgb(222, 196, 155)"
              plain
              type="primary"
              size="mini"
              >退款</van-button
            >
            <van-button color="rgb(222, 196, 155)" type="primary" size="mini"
              >催发货</van-button
            >
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已完成">
        <!-- 商品小卡片 -->
        <van-card
          v-for="(item, i) of order"
          :key="i.id"
          :num="item.num"
          :price="item.price * item.num"
          :desc="item.category"
          :title="item.title"
          :thumb="`/img/product/${item.pic}`"
        >
          <template #tags>
            <van-tag plain type="danger">包邮</van-tag>
          </template>
          <template #footer>
            <van-button
              color="rgb(222, 196, 155)"
              plain
              type="primary"
              size="mini"
              >退款</van-button
            >
            <van-button color="rgb(222, 196, 155)" type="primary" size="mini"
              >催发货</van-button
            >
          </template>
        </van-card>
      </van-tab>
    </van-tabs>

    <!-- 底部 -->
    <van-tabbar
      v-model="active"
      active-color="rgb(222,196,155)"
      inactive-color="#fff"
      class="footer"
    >
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/fication">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" :to="`/cart/${this.uid}`"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="orders-o" :to="`/orderlist/${this.uid}`"
        >订单</van-tabbar-item
      >
      <van-tabbar-item icon="contact" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 3,
      active1: 0,
      uid: sessionStorage.getItem("uid"),
      order: [],
    };
  },
  mounted() {
    this.axios.get(`/order/${this.uid}`).then((result) => {
      console.log(result.data);
      this.order = result.data.data;
    });
  },
};
</script>

<style>
.orderlist .van-nav-bar {
  background-color: rgb(222, 196, 155);
}
.orderlist .van-nav-bar .van-icon,
.orderlist .van-nav-bar__text,
.orderlist .van-nav-bar__title {
  color: white;
}
.orderlist .van-tabs__wrap {
  margin-top: 46px;
}
.orderlist .van-tabs__line {
  background-color: rgb(222, 196, 155);
}
.orderlist .van-card:last-child {
  margin-bottom: 50px;
}
.orderlist .van-tabbar--fixed {
  background-color: rgb(222, 196, 155);
}
</style>